<template>
  <div>
    <div class="btn">
      <div class="consult" @click="btn">{{ text }}</div>
    </div>
    <Dialog ref="dialog" />
  </div>
</template>
<script>
import { mobileConsult, browserRedirect } from '@/components/mobileConsult.js'
export default {
  props: {
    text: {
      type: String,
      required: false,
      default: '在线咨询'
    }
  },
  created () {
    // if (process.client && this.browserRedirect()) {
    //   window.yzf && window.yzf.init({
    //     sign: '37ef9b9780275393224c99ea48b4b163b4d944cb72b98c4f9e590080457f0225dda125b63937827725581c0b2818644735e24015',
    //     uid: '',
    //     data: {
    //       c1: '',
    //       c2: '',
    //       c3: '',
    //       c4: '',
    //       c5: ''
    //     },
    //     selector: '.consult',
    //     callback: function(type, data){}
    //   })
    //   window.yzf.close() // 关闭1已打开的回话窗口
    // }
    // mobileConsult('.consult')
  },
  methods: {
    btn () {
      if (this.text === '在线咨询') {
        this.$refs.dialog.action()
      }
    }
  }
}
</script>
<style lang="sass" scoped>
.btn
  padding: 0
  .consult
    text-align: center
    border-radius: 4px
    color: #fff
    background: #F57033
    box-shadow: 0px 4px 16px rgba(245, 112, 51, 0.5)
    @media screen and (max-width: 750px)
      width: 180px
      height: 32px
      line-height: 32px
      font-size: 16px
    @media screen and (min-width: 750px)
      width: 280px
      height: 52px
      line-height: 52px
      font-size: 18px
  .consult:hover
    @media screen and (min-width: 750px)
      background: #D6551A
</style>
